<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app" class="root">
    <div>父组件</div>
    <div>
      <button @click='handle'>销毁</button>
    </div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      非父子组件间传智
      1.单独的时间中心管理组件间的通讯
      var eventHub = new Vue()

      2. 监听事件与销毁事件
      // 监听事件
      eventHub.$on("add-todo",addTodo)
      // 销毁事件
      eventHub.$off("add-todo")

      3. 触发事件
      eventHub.$emit('add-todo',id) // 后面的参数是可选的
    */

    // 提供事件中心
    var hub = new Vue();

    Vue.component('test-tom',{
      data:function(){
        return {
          num : 0
        };
      },
      template:`
        <div>
          <div>TOM:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        <div>
      `,
      methods:{
        handle:function(){
          // 触发事件
          hub.$emit('jerry-event',1);
        }
      },
      mounted:function(){
        hub.$on('tom-event',(val) => {
           this.num += val;
        });
      }
    });

    Vue.component('test-jerry',{
      data:function(){
        return {
          num : 0
        };
      },
      template:`
        <div>
          <div>JERRY:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        <div>
      `,
      methods:{
        handle:function(){
          hub.$emit('tom-event',2);
        }
      },
      mounted:function(){
        hub.$on('jerry-event',(val) => {
           this.num += val;
        });
      }
    });
    

    var vm = new Vue({
      el: '#app',
      data: {
      },
      methods:{
        handle:function(){
          hub.$off('tom-event');
          hub.$off('jerry-event');
        }
      }
    });
  </script>
</body>

</html>